import React, { useState } from 'react'
import NavBar from '@/components/NavBar'
import styles from './index.module.scss'
import Textarea from '@/components/Textarea'
import Input from '@/components/input'
import { Toast } from 'antd-mobile'

export default function EditInput({ type, onClose, onCommit, profile }) {
  const [value, setValue] = useState(profile)

  const onValueChange = (e) => {
    if (type === 'name') {
      setValue({
        ...profile,
        name: e.target.value,
      })
    } else {
      setValue({
        ...profile,
        intro: e.target.value,
      })
    }
  }

  const commit = () => {
    if (type === 'name') {
      onCommit(type, value.name)
      Toast.show({
        icon: 'success',
        content: '修改成功',
      })
    }
    if (type === 'intro') {
      onCommit(type, value.intro)
      Toast.show({
        icon: 'success',
        content: '修改成功',
      })
    }
  }
  return (
    <div className={styles.root}>
      <NavBar
        extra={<span className="commit-btn">提交</span>}
        className="navbar"
        onLeftClick={onClose}
        onRigthClick={commit}
      >
        编辑{type === 'name' ? '昵称' : '简介'}
      </NavBar>
      <div className="content">
        <h3>{type === 'name' ? '昵称' : '简介'}</h3>
        {type === 'name' ? (
          <div className="input-wrap">
            <Input value={value.name} onChange={onValueChange} />
          </div>
        ) : (
          <Textarea
            placeholder="请输入"
            value={value.intro || ''}
            onChange={onValueChange}
          />
        )}
      </div>
    </div>
  )
}
